<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小猫怪</title>
    <style>
         #outer{
            background-image: url(../imgs/猫.jpg);
            background-size: 100px 100px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            /* left和top */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer"></div>
    <script>
        let div = document.querySelector("#outer")
        //距离文档可见区域左/上距离
        let tx = 10
        let ty = 10

        let mx = 0
        let my = 0
        //计算整个body的宽度和高度
        let bw = document.body.clientWidth
        //document.body.clientHeight - 如果body没有设置height样式,返回0
        //let bh = document.body.clientHeight
        let bh = document.documentElement.clientHeight
   
        //获取div的宽度和高度
        let dw = div.offsetWidth
        let dh = div.offsetHeight

        function move(){
            mx+=tx
            my+=ty

            //考虑边界<
            if(my+dh>=bh || my<=0){
                ty*=-1
            }
            if(mx+dw>=bw || mx<=0){
                tx*=-1
            }

            div.style.left=mx+"px"
            div.style.top=my+"px"
        }
        
        let st = setInterval(move,50)

        outer.onmouseover=function(){
            clearInterval(st)
        }
        outer.onmouseout=function(){
            st = setInterval(move,50)
        }
    </script>
</body>
</html>